<style scoped>
    .layout-con {
        height: 100%;
        width: 100%;
    }

    .menu-item span {
        display: inline-block;
        overflow: hidden;
        width: 69px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
        transition: width .2s ease .2s;
    }

    .menu-item i {
        transform: translateX(0px);
        transition: font-size .2s ease, transform .2s ease;
        vertical-align: middle;
        font-size: 16px;
    }

    .collapsed-menu span {
        width: 0px;
        transition: width .2s ease;
    }

    .collapsed-menu i {
        transform: translateX(5px);
        transition: font-size .2s ease .2s, transform .2s ease .2s;
        vertical-align: middle;
        font-size: 22px;
    }

    .user {
        text-align: center;
    }

    .avatar {
        width: 115px;
        height: 115px;
        border-radius: 50%;
        background-size: 215px;
        background-repeat: no-repeat;
        background-position-y: 9%;

    }
</style>
<template>
    <div class="layout">
        <Layout :style="{minHeight: '100vh'}">

            <Layout>
                <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}">
                    <Button type="primary" shape="circle" icon="ios-close-circle" v-on:click="router('/')">网站首页</Button>
                </Header>
                <Content :style="{padding: '0 16px 16px'}">
                    <div style="text-align:center">
                        <div style="margin-top: 100px">
                            <img src="https://file.iviewui.com/dist/2ecd3b0452aa197097d5131afacab7b8.png" width="75px"
                                 height="75px">
                            <h3>{{ user.user_name }} (UID: {{ user.user_id }})</h3>
                            <p style="margin-top: 100px;font-size: 15px">
                                <Icon type="ios-at" :size="30"/>
                                email： {{ user.user_email }}
                                <br>
                                <br>
                                <Icon type="ios-alarm" :size="30"/>
                                注册时间： {{ user.user_rtime }}
                            </p>

                        </div>
                    </div>

                </Content>

                <Modal v-model="modal_pwd" fullscreen title="修改密码">
                    <div style="text-align: center;margin-top: 15%">
                        <Input v-model="pwd" placeholder="请输入新密码" clearable style="width: 200px"/>
                        <Button type="success" @click="up_pwd">修改</Button>
                    </div>
                </Modal>
                <Modal v-model="modal_email" fullscreen title="修改邮箱">
                    <div style="text-align: center;margin-top: 15%">
                        <Input v-model="email" placeholder="请输入新邮箱" clearable style="width: 200px"/>
                        <Button type="success" @click="up_email">修改</Button>
                    </div>
                </Modal>
                <Footer class="layout-footer-center">
                    <p style="text-align: center">
                        <Button type="info" v-on:click="router('/')">返回首页</Button>
                        <Button type="info" @click="modal_pwd = true">修改密码</Button>
                        <Button type="info" @click="modal_email = true">修改邮箱</Button>
                        <Button type="warning" @click="clearAllCookie">注销登录</Button>
                    </p>
                </Footer>
            </Layout>
        </Layout>
    </div>
</template>
<script>
    import axios from 'axios'

    export default {
        name: 'User',
        data() {
            return {
                isCollapsed: false,
                modal_pwd: false,
                modal_email: false,
                user: '',
                pwd: '',
                email:'',
            };
        },
        methods: {
            router(path) {
                this.$router.push({path: path});
            },
            // 成功提示
            success(msg) {
                this.$Message.success({
                    content: msg,
                    duration: 2
                });
            },
            // 错误提示
            error(msg) {
                this.$Message.error({
                    content: msg,
                    duration: 2
                });
            },
            // 获取Cookies
            getCookie(name) {
                var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
                if (arr = document.cookie.match(reg)) {
                    return (arr[2]);
                }
                else {
                    return null;
                }
            },
            clearAllCookie() {
                var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
                if (keys) {
                    for (var i = keys.length; i--;)
                        document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()
                }
                location.reload();
            },
            up_pwd() {
                var self = this;
                axios.put('http://111.230.56.24/api/users/password/' + this.getCookie('user_id'),
                    {
                        password: this.pwd,
                    },
                    {
                        headers: {
                            'time': (new Date()).valueOf(),
                            'Authorization': this.getCookie('token'),
                        }
                    }
                )
                    .then(function (response) {
                        self.loading = false;
                        if (response.data.code == 200) {
                            self.success("修改成功");
                        } else {
                            self.error('修改失败');
                        }
                    })
                    .catch(function (error) {
//                        self.$Message.error(error);
                    });
            },
            up_email() {
                var self = this;
                axios.put('http://111.230.56.24/api/users/email/' + this.getCookie('user_id'),
                    {
                        email: this.email,
                    },
                    {
                        headers: {
                            'time': (new Date()).valueOf(),
                            'Authorization': this.getCookie('token'),
                        }
                    }
                )
                    .then(function (response) {
                        self.loading = false;
                        if (response.data.code == 200) {
                            self.success("修改成功");
                        } else {
                            self.error('修改失败');
                        }
                    })
                    .catch(function (error) {
//                        self.$Message.error(error);
                    });
            },
            getuser() {
                var self = this;
                self.user_name = self.getCookie('user_name');
                if (self.getCookie('token') == null) {
                    self.$router.push("login");
                    return;
                }
                return axios.get("http://111.230.56.24/api/users/" + self.getCookie('user_id'), {
                    headers: {
                        'time': (new Date()).valueOf(),
                        'Authorization': this.getCookie('token'),
                    },
                })
                    .then(function (response) {
                        self.user = response.data.data;
                    }).catch(function (error) {
                        alert(error);
                    });
            },
        },
        computed: {
            menuitemClasses: function () {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : ''
                ]
            }
        },
        created: function () {
            this.getuser();
        }
    }
</script>